<template>
    <div class="test-box">

        <div v-for="item of fields" >
            <input type="text" ref="input" :value="item" @input="doThis"/>
        </div>

    </div>
</template>

<script>
    export default {
        name: "test",
        data () {
            return {
                res: []
            }
        },
        props: ['field', 'odds', 'defaultOdds'],
        methods: {
            doThis() {
                // this.$emit('input', this.$refs.input.value);
                let odds = []
                this.$refs.input.forEach((v, k) => {
                    odds.push({
                        field: this.field[k],
                        odds: v.value
                    })
                })
                this.$emit('input', odds)
            }
        },
        computed: {
            fields() {
                let odds = []
                console.log(this.odds)
                this.field.forEach((v, k) => {
                    console.log(this.odds[k])
                    if (this.odds[k]) {
                        odds.push(this.odds[k].odds)
                    } else {
                        odds.push(this.defaultOdds)
                    }
                })
                return odds
            }
        }
    }
</script>

<style scoped>

</style>